<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
    <el-breadcrumb-item :to="{ path: '/' }">后台管理</el-breadcrumb-item>
    <el-breadcrumb-item>修改商品</el-breadcrumb-item>
  </el-breadcrumb>

  <el-divider></el-divider>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
    <el-form-item label="id编号" >
      <el-input v-model="ruleForm.id" disabled></el-input>
    </el-form-item>
    <el-form-item label="作者" prop="author">
      <el-input v-model="ruleForm.author"></el-input>
    </el-form-item>
    <el-form-item label="书名" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
    <el-form-item label="简介" prop="describe">
      <el-input v-model="ruleForm.describe"></el-input>
    </el-form-item>
    <el-form-item label="售价(元)" prop="money">
      <el-input v-model="ruleForm.money"></el-input>
    </el-form-item>
    <el-form-item label="类型" prop="money">
      <el-input v-model="ruleForm.categoryId"></el-input>
    </el-form-item>


    <el-form-item   label="包装类型">
      <el-select v-model="ruleForm.packId" placeholder="请选择商品包装类型">
        <el-option
            v-for="item in pack"
            :key="item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
      </el-select>

    </el-form-item>

    <el-form-item label="出版社">
      <el-select v-model="ruleForm.pressId"  placeholder="请选择出版社">
        <el-option
            v-for="item in press"
            :key="item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="出版时间" prop="houseTime">

      <el-date-picker
          v-model="ruleForm.houseTime"
          type="date"
          placeholder="选择日期"
      >
      </el-date-picker>

    </el-form-item>
    <el-form-item label="库存" prop="num">
      <el-input v-model="ruleForm.num"></el-input>
    </el-form-item>
    <el-form-item label="销量" prop="nums">
      <el-input v-model="ruleForm.nums"></el-input>
    </el-form-item>
    <el-form-item label="排序序号" prop="sort">
      <el-input v-model="ruleForm.sort"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="updateForm('ruleForm')">修改商品信息</el-button>
    </el-form-item>
    <el-form-item label="商品图片">
      <div class="demo-image__preview" v-for="url in urlArr">
        <el-image
            style="width: 100px; height: 100px"
            :src="url.url"
            :preview-src-list="urlArrsss">
        </el-image>
        <el-button style="margin-left: 50px;" type="primary" @click="deleteUrl(url.id)">删除图片</el-button>
      </div>
    </el-form-item>
    <el-form-item>
    <el-upload
        action="http://localhost:8080/upload"
        name="pic"
        limit="1"
        list-type="picture-card"
        :on-success="handleSuccess"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <el-button style="margin-left: 50px;" type="primary" @click="insertUrl()">添加图片</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="warning" @click="backToPreStep()">返回</el-button>
    </el-form-item>
  </el-form>

</div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      rules: {
        author: [
          {required: true, message: '请输入作者名', trigger: 'blur'},

        ],
        name: [
          {required: true, message: '请输入书名', trigger: 'blur'},
        ],
        describe: [
          {required: true, message: '请输入描述', trigger: 'blur'},
        ],
        houseTime: [
          {required: true, message: '请输入或选择出版时间', trigger: 'blur'},
        ],
        money: [
          {required: true, message: '请输入售价', trigger: 'blur'},
        ],
        num: [
          {required: true, message: '请输入库存', trigger: 'blur'},
        ],
        sort: [
          {required: true, message: '请输入自定义排序', trigger: 'blur'},
        ],
      },
      ruleForm: {

      },
      urlArr:[],
      urlArr1:[],
      urlArrsss:[],
      pack:[
      ],
      dialogImageUrl: '',
      dialogVisible: false,
      url:{},
      press:[ {id:1,name:"hh"}],
    }
  },
  methods: {
    insertUrl(){
      let url = 'http://localhost:8080/adminGoodsAddNew/insertUrl';
      console.log('url = ' + url);
      this.url.id=this.ruleForm.id
      let urlArr = this.qs.stringify(this.url);
      console.log('urlArr = ' + urlArr);
      this.axios.post(url,urlArr).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message.success("添加图片成功");
        } else {
          this.$message.error(responseBody.message);
        }
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
      this.axios.get("http://localhost:8080/remove?url="+this.url).then((response) => {
        this.$message("服务器删除完成")
        this.url="";
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(respose,file,fileList){
      this.url.url=respose;
      console.log("url",this.url)
    },
    deleteUrl(id){
      console.log("删除图片",id)
      let url = 'http://localhost:8080/adminGoodsAddNew/'+id+'/deleteUrlById';
      this.axios.post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message({
            type: 'success',
            message: "删除商品信息完成"
          });
          this.loadLocalUrlArr();
        } else {
          this.$message({
            type: 'info',
            message: responseBody.message
          });

        }
      })
    },
    backToPreStep() {
      this.$router.push('goodslist');
    },
    loadLocalRuleForm() {
      let localRuleFormString = localStorage.getItem('ruleForm');
      if (localRuleFormString) {
        let localRuleForm = JSON.parse(localRuleFormString);
          this.ruleForm = localRuleForm.data;
          console.log("2222",this.ruleForm)
          this.$message.success("获取信息成功")
        } else {
          this.$message.error("获取信息失败")
        }
    },
    updateForm(ruleForm){
      console.log("查看商品信息",this.ruleForm)
      let url = 'http://localhost:8080/adminGoodsAddNew/updateGoods';
      this.ruleForm.createTime=null;
      let r=this.qs.stringify(this.ruleForm)
      this.axios.post(url,r).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message({
            type: 'success',
            message: "修改商品信息完成"
          });
        } else {
          this.$message({
            type: 'info',
            message: responseBody.message
          });

        }
      })
    },
    loadLocalUrlArr(){
      let url = 'http://localhost:8080/adminGoodsAddNew/' + this.ruleForm.id + '/selectImgById';
      this.axios.get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.urlArr=responseBody.data;
          console.log("商品图片"+this.urlArr)
          for (let i=0;i<this.urlArr.length;i++){
            this.urlArrsss[i]=this.urlArr[i].url;
            console.log("```````````````````"+this.urlArrsss)
          }
        } else {
          this.$message({
            type: 'info',
            message: responseBody.message
          });

        }
      })
    },
    selectPackList() {
      //查询包装类型
      let url = 'http://localhost:8080/adminGoodsAddNew/selectPackList';
      console.log('url = ' + url);
      this.axios.get(url).then((response) => {
        console.log('response = ' + response);
        let responseBody = response.data;
        this.pack = responseBody.data;
      });
    },
    selectPressList() {
      //查询出版社
      let url = 'http://localhost:8080/adminGoodsAddNew/selectPressList';
      console.log('url = ' + url);
      this.axios.get(url).then((response) => {
        console.log('response = ' + response);
        let responseBody = response.data;
        this.press = responseBody.data;
      });
    },
  },
  mounted() {//挂载
    console.log('mounted')
    this.loadLocalRuleForm();
    this.loadLocalUrlArr();
    this.selectPackList();
    this.selectPressList();
  }

}
</script>
